<script lang="ts">
	import Header from '$lib/components/Header.svelte';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import '../app.css';

	let { children } = $props();

	userStore.init();
</script>

<Header />
{@render children()}

<div class="toast toast-end">
	{#each appStore.toastMessageList as msg}
		<div class="alert alert-{msg.level}">
			<div>
				<h3 class="text-2xl font-bold">
					{#if msg.title != undefined}
						{msg.title}
					{:else if msg.level == 'info'}
						提示
					{:else if msg.level == 'success'}
						成功
					{:else if msg.level == 'warning'}
						警告
					{:else if msg.level == 'error'}
						错误
					{/if}
				</h3>
				<span>{msg.content}</span>
			</div>
		</div>
	{/each}
	<!-- 用于预加载样式 -->
	<div class="alert-info alert-success alert-warning alert-error"></div>
</div>
